<template>
  <cloudPage>
    <cloudHeader slot="gHeader">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view class="grace-header-content-noflex grace-text-center font-32">{{
          $t("common.title.announcement")
        }}</view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons" style="font-size: 38rpx"></view>
      </view>
    </cloudHeader>

    <view class="gbody main">
      <mescroll-body
        ref="mescrollRef"
        @init="mescrollInit"
        @down="downCallback"
        @up="upCallback"
        :down="downOption"
        :up="upOption"
      >
        <view class="items">
          <view
            class="announce"
            v-for="item in announcement.data"
            :key="item.key"
          >
            <navigator
              hover-class="none"
              :url="'/pages/announcement/detailed?id=' + item.id"
            >
              <view class="head">
                <text class="circle"></text>
                <text class="title">{{ item.value.title }}</text>
              </view>
              <view class="body">
                <view>
                  <rich-text
                    type="text"
                    style="color: rgba(255, 255, 255, 0.8)"
                    :nodes="item.value.content"
                  ></rich-text>
                </view>
              </view>
              <view class="footer grace-flex">
                <view>查看详细</view>
                <view>
                  <cloudIcon
                    type="grace"
                    name="icon-arrow-right"
                    style="color: #aeaeae; font-size: 30rpx"
                  ></cloudIcon>
                </view>
              </view>
            </navigator>
          </view>
        </view>
      </mescroll-body>
    </view>
  </cloudPage>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      downOption: {
        auto: true, // 自动加载 (mixin已处理第一个tab触发downCallback)
      },
      upOption: {
        auto: false, // 不自动加载
        noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10, // 每页数据的数量
        },
        empty: {
          tip: "~ 空空如也 ~",
        },
      },
      page: {
        page: 1, // 页码
        limit: 10, // 页数
      },
    };
  },
  onLoad() {},
  computed: {
    ...mapGetters("announcement", ["announcement"]),
  },
  methods: {
    ...mapActions("announcement", ["loadAnnouncement"]),
    /*下拉刷新的回调 */
    downCallback() {
      // 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
      this.mescroll.resetUpScroll();
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      let $this = this;
      this.page.page = page.num;
      this.page.limit = page.size;
      this.loadAnnouncement({
        page: this.page.page,
        limit: this.page.limit,
      })
        .then((res) => {
          $this.mescroll.endByPage(res.data.length, res.last_page);
        })
        .catch((error) => {
          $this.mescroll.endErr();
        });
    },
  },
};
</script>

<style scoped>
.items {
  padding: 30rpx 20rpx;
}
.items .announce {
  background: #121624;
  /* border: 1rpx solid rgba(241, 241, 241, 1); */
  border-radius: 10rpx;
  padding: 0 20rpx;
}
.items .announce:not(:first-child) {
  margin-top: 30rpx;
}
.items .announce .head .circle {
  width: 20rpx;
  height: 20rpx;
  background: rgba(244, 135, 106, 1);
  border-radius: 50%;
  display: inline-block;
  margin-right: 20rpx;
}
.items .announce .head {
  font-size: 32rpx;
  font-weight: 500;
  /* color: rgba(43, 43, 43, 1); */
  color: #fff;
  line-height: 88rpx;
}
.items .announce .footer {
  margin-top: 20rpx;
  border-top: 1rpx solid rgba(255, 255, 255, 0.1);
  line-height: 86rpx;
  justify-content: space-between;
}
.items .announce .footer view:first-child {
  color: #699ce8;
  font-weight: 300;
  font-size: 28rpx;
}
.items .announce .body {
  color: #6f6f6f !important;
  text-indent: 1rem;
  max-height: 116rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
</style>
